<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <div class="Logout">
      <Logout>退出</Logout>
    </div>
     <div class="image">
      <el-image :src="src2"></el-image>
      <!-- <el-image :src="src1"></el-image> -->
     </div>
  


    <h1>添加家族成员关系</h1>


  
    <el-form-item label="关系编号" prop="id">
      <el-input style="width: 800px" v-model="ruleForm.id" placeholder="请输入关系编号" prefix-icon="el-icon-price-tag" maxlength="10" show-word-limit clearable></el-input>
    </el-form-item>

  <el-form-item label="人员ID1" prop="daughter">
      <el-input style="width: 800px" v-model="ruleForm.daughter" placeholder="请输入人员ID1" prefix-icon="el-icon-location" maxlength="50" show-word-limit clearable></el-input>
    </el-form-item>
     
   
    <el-form-item label="人员ID2" prop="name">
      <el-input style="width: 800px" v-model="ruleForm.name" placeholder="请输入人员ID2" prefix-icon="el-icon-coordinate" maxlength="50" show-word-limit clearable></el-input>
    </el-form-item>
   
<!--   
    <el-form-item label="人员ID2" prop="le">
      <el-input style="width: 800px" v-model="ruleForm.le" placeholder="请输入名字2" prefix-icon="el-icon-coin" maxlength="10" show-word-limit clearable></el-input>
    </el-form-item> -->

     <el-form-item label="关系类型" prop="kind">
      <el-input style="width: 800px" v-model="ruleForm.kind" placeholder="请输入关系类型" prefix-icon="el-icon-coin" maxlength="10" show-word-limit clearable></el-input>
    </el-form-item>


  

    <!-- <el-form-item label="上课节数" prop="number"> -->
      <!-- <el-input style="width: 800px" v-model="ruleForm.number" placeholder="请输入课节数" prefix-icon="el-icon-tickets" maxlength="5" show-word-limit clearable></el-input> -->
    <!-- </el-form-item> -->
   
    
     <!-- <el-form-item label="父亲" prop="father">
       <el-input style="width: 800px" v-model="ruleForm.father" placeholder="请输入父亲" prefix-icon="el-icon-star-on" maxlength="5" show-word-limit clearable></el-input>
      </el-form-item> -->


    <!-- <el-form-item label="母亲" prop="mo">
      <el-input style="width: 800px" v-model="ruleForm.mo" placeholder="请输入母亲" prefix-icon="el-icon-date" maxlength="10" show-word-limit clearable></el-input>
    </el-form-item>
  
     -->
   
   
    <!-- <el-form-item label="儿子" prop="son"> 
      <el-input style="width: 800px" v-model="ruleForm.son" placeholder="请输入儿子" prefix-icon="el-icon-star-on" maxlength="5" show-word-limit clearable></el-input>
      </el-form-item> -->
<!-- 
       <el-form-item label="存在编号" prop="ID">
     <el-input style="width: 800px" v-model="ruleForm.ID" placeholder="请输入存在编号" prefix-icon="el-icon-s-check" maxlength="10" show-word-limit clearable></el-input>
   </el-form-item>  -->
  
    <!-- <el-form-item label="祖母" prop="p">
      <el-input style="width: 800px" v-model="ruleForm.p" placeholder="请输入祖母" prefix-icon="el-icon-star-off" maxlength="5" show-word-limit clearable></el-input>
    </el-form-item>
     -->
    <!-- <el-form-item label="祖父" prop="num">
      <el-input style="width: 800px" v-model="ruleForm.num" placeholder="请输入祖父" prefix-icon="el-icon-star-on" maxlength="5" show-word-limit clearable></el-input>
    </el-form-item>

     -->

    


    <el-form-item>
      <el-button type="success" @click="submitForm('ruleForm')" icon="el-icon-check">提交</el-button>
      <el-button type="danger" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Logout from "./Logout";
export default {
  name: "AddRelation",
  components:{Logout},
  data() {
    return {
        src2:"https://pic4.zhimg.com/v2-d983d9a4a5875fe63790fd7000f4911b_b.jpg",
      ruleForm : {
        id : '',
        name : '',
        number: '',
        mo: '',
        le:'',
        daughter:'',
        ID:'',
        p:'',
        num:'',
        father:'',
        son:'',
        kind:'',
        

      },
      rules : {
        id:
          {required: true, message: '请输入关系号', trigger: 'blur'},

        name:
          {required: true, message: '请输入名字1', trigger: 'blur'},

        number:
          {required: true, message: '请输入课节节数', trigger: 'blur'},

        mo:
          {required: true, message: '请输入名字2', trigger: 'blur'},

        le:
          {required: true, message: '请输入名字2', trigger: 'blur'},
        daughter:
          {required: true, message: '请输入女儿', trigger: 'blur'},
       
       ID:
           {required: true, message: '请输入存在编号', trigger: 'blur'},
        
        p:
          {required: true, message: '请输入祖母', trigger: 'blur'},
       
       num:
          {required: true, message: '请输入祖父', trigger: 'blur'},
     
        father:
          {required: true, message: '请输入父亲', trigger: 'blur'},
    

         son:
          {required: true, message: '请输入儿子', trigger: 'blur'},

          kind:
          {required: true, message: '请输入关系类型', trigger: 'blur'},
    

    
    },
    }
  },
  methods : {
    submitForm(formName) {
      const _this=this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(_this.ruleForm)
          const params = {
            cno:_this.ruleForm.id,
            cname:_this.ruleForm.name,
            cmother:_this.ruleForm.mo,
            ccycle:_this.ruleForm.cycle,
            camount:_this.ruleForm.le,
            cdaughter:_this.ruleForm.daughter,
            tno:_this.ruleForm.ID,
            cneed:_this.ruleForm.p,
            cjoin:_this.ruleForm.num,
            cfather:_this.ruleForm.father,
            cson:_this.ruleForm.son,
            ckind:_this.ruleForm.kind




          }
          // this.$axios.post(`/InsertRelation`,params).then((res) => {
          //   console.log(res);
          //   if (res.data.msg=="插入关系成功"){
          //     alert("插入关系成功");
          //   } else {
          //     alert(res.data.msg);
          //   }
          // });

          // console.log("cno:", params.cno, " cname:", params.cname, )
          this.$axios.post(`/InsertRelation`,params).then((res) => {   // 请求后端  给后端传参数  在执行then（res）之前，先向后端请求，前端一直等待后端返回的状态码
            console.log(res);   
          
          if (res.data.msg=="插入关系成功") { //如果返回信息，则插入成功
              alert("插入关系成功")
            } else {
              alert("插入关系失败")
            }
          });
          //alert('提交成功!');
        }
      });
   
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style scoped>

</style>
